<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import gdjdService from '@/api/gdjd'
import { TableItem } from '@/api/common'
import tableBox from '@/components/queryTable/table/index.vue'
import jdbbDialog from '@/views/gdjd/jdtj/dialogs/jdbb-dialog.vue'
import bbxzDialog from '@/views/gdjd/jdtj/dialogs/bbxz-dialog.vue'
import { getFldm } from '@/utils/get-fldm'
import dayjs from 'dayjs'

onMounted(() => {
  // 获取报表类型分类代码
  getBblxFldm()
  changePageNum(1)
})

const bblxList = ref<any[]>([])
const getBblxFldm = async () => {
  bblxList.value = await getFldm('gd056')
}

/*
 * 查询列表数据
 */
// 监督报表

// 办结日期
const createTime = ref([new Date(new Date().getFullYear(), 0, 1), new Date()])

const form = ref<any>({
  pageSize: 20,
  pageNum: 1,
  filter: {
    bblxdm: '', // 类型编码
    // bbcjksrq: '', // 开始时间
    // bbcjjsrq: '', // 结束时间
  },
})

// 表格数据
const tableData = ref<TableItem>({
  data: [],
  titles: [
    {
      label: '名称',
      prop: 'jdbbmc',
      width: null,
      custom: false,
      sort: false,
      dqfs: 'left',
    },
    { label: '创建单位', prop: 'fbdwmc', width: null, dqfs: 'left' },
    { label: '创建时间', prop: 'cjrq', width: null, dqfs: 'left', format: 'YYYY-MM-DD HH:mm:ss' },
    { label: '创建用户', prop: 'cjrxm', width: null, dqfs: 'left' },
    { label: '发布状态', prop: 'fbztmc', width: null, dqfs: 'left' },
  ],
})

/**
 * @描述: 表格相关
 */
const total = ref<number>(0)
const page = computed(() => {
  return {
    pageNum: form.value.pageNum,
    pageSize: form.value.pageSize,
    total: total.value,
    // exportParams: {
    //   url: `${window.IPCONFIG}/api/gdgl/queryWtjList`,
    //   wjmc: '案件归档-未提交.xls',
    // },
  }
})

const loading = ref<boolean>(false)
const queryTable = (refresh?: boolean) => {
  const params = {
    filter: {
      bblxdm: form.value.filter.bblxdm,
      bbcjksrq: createTime.value.length ? dayjs(createTime.value[0]).format('YYYY-MM-DD') : '',
      bbcjjsrq: createTime.value.length ? dayjs(createTime.value[1]).format('YYYY-MM-DD') : '',
    },
    pageNum: form.value.pageNum,
    pageSize: form.value.pageSize,
  }
  loading.value = true
  gdjdService
    .queryJdbblb(params)
    .then((res) => {
      tableData.value.data = res.data.list
      total.value = res.data.total
      if (refresh) ElMessage({ type: 'success', message: '刷新成功' })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

/**
 * 表格选择
 */
const multipleSelection = ref<any[]>([])
const selectionChange = (val: any[]) => {
  multipleSelection.value = val
}

// 页码发生改变时
const changePageNum = (val: number) => {
  form.value.pageNum = val
  queryTable()
}

// 页条数发生改变时
const changeSize = (val: number) => {
  form.value.pageNum = 1
  form.value.pageSize = val
  queryTable()
}

const tableBoxRef = ref<InstanceType<typeof tableBox>>()

const rowClick = (row: any) => {
  if (multipleSelection.value?.includes(row)) {
    tableBoxRef.value?.refTable.toggleRowSelection(row, false)
  } else {
    tableBoxRef.value?.refTable.toggleRowSelection(row, true)
  }
}

/*
 * 生成监督报告（打开弹窗）
 */
const jdbbRef = ref<InstanceType<typeof jdbbDialog>>()
const generateJdbg = () => {
  jdbbRef.value?.openDialog()
}

/*
 * 发布
 */
const releaseGdbb = () => {
  ElMessageBox.confirm('是否发布监督报表?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const params = {
      jdbbbhList: multipleSelection.value.map((el) => el.jdbbbh),
    }
    gdjdService
      .releaseGdbb(params)
      .then((res) => {
        if (res.data) {
          ElMessage({ type: 'success', message: '发布成功' })
          queryTable()
        }
      })
      .catch((err) => {
        !err.isError && ElMessage({ type: 'warning', message: err.message })
      })
  })
}

/*
 * 取消发布
 */
const recallGdbb = () => {
  ElMessageBox.confirm('是否取消发布监督报表?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const params = {
      jdbbbhList: multipleSelection.value.map((el) => el.jdbbbh),
    }
    gdjdService
      .recallGdbb(params)
      .then(() => {
        ElMessage({ type: 'success', message: '取消发布成功' })
        queryTable()
      })
      .catch((err) => {
        !err.isError && ElMessage({ type: 'warning', message: err.message })
      })
  })
}

/*
 *  打开下载监督报表弹窗
 */
const bbxzRef = ref<InstanceType<typeof bbxzDialog>>()
const openDownloadJdbb = () => {
  bbxzRef.value?.openDialog(multipleSelection.value)
}

/*
 * 删除监督报表
 */
const deleteJdbb = () => {
  ElMessageBox.confirm('是否删除选中的数据?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const params = {
      jdbbbhList: multipleSelection.value.map((el) => el.jdbbbh),
    }
    gdjdService
      .deleteJdbb(params)
      .then(() => {
        ElMessage({ type: 'success', message: '删除成功' })
        queryTable()
      })
      .catch((err) => {
        !err.isError && ElMessage({ type: 'warning', message: err.message })
      })
  })
}
</script>
<template>
  <div class="container">
    <div class="form">
      <el-form :model="form" ref="filterFormRef" inline label-width="100px">
        <el-form-item label="报表类型:">
          <el-select v-model="form.filter.bblxdm" style="width: 300px" :clearable="true">
            <el-option
              v-for="item in bblxList"
              :key="item.dm"
              :label="item.mc"
              :value="item.dm"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间:">
          <el-date-picker
            style="width: 240px"
            v-model="createTime"
            type="daterange"
            start-placeholder="请选择开始日期"
            end-placeholder="请选择结束日期"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item class="search">
          <el-button type="primary" @click="() => queryTable()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="submit-list">
      <div>
        <button
          class="btn_operation"
          @click="deleteJdbb"
          :disabled="!multipleSelection.length || multipleSelection.some((el) => el.fbzt === '2')"
        >
          <div class="btn-deletescaj"></div>
          删除
        </button>
        <button
          class="btn_operation"
          @click="openDownloadJdbb"
          :disabled="!multipleSelection.length"
        >
          <div class="btn-bj"></div>
          报表下载
        </button>
        <button
          class="btn_operation"
          @click="releaseGdbb"
          :disabled="!multipleSelection.length || multipleSelection.some((el) => el.fbzt === '2')"
        >
          <div class="btn-jsstaj"></div>
          发布
        </button>
        <button
          class="btn_operation"
          @click="recallGdbb"
          :disabled="!multipleSelection.length || multipleSelection.some((el) => el.fbzt === '1')"
        >
          <div class="btn-cx"></div>
          取消发布
        </button>
        <!-- <button class="btn_operation" @click="generateJdbg">
          <div class="btn-scdh"></div>
          生成监督报告
        </button> -->
        <button class="btn_operation" @click="() => queryTable(true)">
          <div class="btn-refresh"></div>
          刷新
        </button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table" v-loading="loading">
      <table-box
        gnbm="jdbb"
        ref="tableBoxRef"
        :tableData="tableData"
        :selectShow="true"
        :showExport="false"
        :changeHeader="false"
        :getTableDataParam="page"
        :formParams="form"
        @selectionChange="selectionChange"
        @changeCurrent="changePageNum"
        @changeSize="changeSize"
        @rowClick="rowClick"
      >
      </table-box>
    </div>
    <!-- 生成监督报告 -->
    <jdbb-dialog ref="jdbbRef"></jdbb-dialog>
    <!-- 报表下载 -->
    <bbxz-dialog ref="bbxzRef"></bbxz-dialog>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .form {
    // padding: 10px 0 0 0;
    border-bottom: 1px solid #dae4f1;
    margin-bottom: 10px;

    .el-form {
      display: flex;
      // justify-content: space-between;
      position: relative;

      .el-form-item.search {
        position: absolute;
        right: 0;
        margin-right: 0px;
      }
    }
  }

  .submit-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .active-img {
    cursor: pointer;
    float: left;
  }
  .active-img + .active-img {
    margin-left: 10px;
  }

  .table {
    flex: 1;
    flex-shrink: 0;
    overflow: auto;
  }
}
</style>
